<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
        }

        .title {
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
            margin-bottom: 50px;
            margin-top: 50px;
        }

        .info {
            display: flex;
            justify-content: space-between;
        }

        table {
            width: 800px;
            border-collapse:collapse;
        }

        thead tr {
            height: 40px;
            background-color: rgb(151, 180, 226);
            color: black;
        }

        tbody tr {
            height: 40px;
        }

        td {
            border: 1px solid black;
            text-align: center;
        }

        button {
            cursor: pointer;
        }

        td span {
            cursor: pointer;
        }

        td span:hover {
            font-weight: bolder;
            color: red;
        }

    </style>
</head>
<body>

    <div class="container">
        <div class="header">
            <div class="title">新增学员</div>
            <div class="info">
                姓名：<input type="text" name="name" id="name" style="width: 100px;">
                年龄：<input type="text" name="age" id="age" style="width: 30px;">
                性别：<select name="gender" id="gender" style="width: 50px;">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                薪资：<input type="text" name="salary" id="salary">
                就业城市：<select name="city" id="city">
                    <option value="北京">北京</option>
                    <option value="长沙">长沙</option>
                    <option value="深圳">深圳</option>
                </select>
                <button>录入</button>
            </div>
        </div>
    
        <div class="content">
            <div class="title">就业榜</div>
    
            <table>
                <thead>
                    <tr>
                        <td>学号</td>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>性别</td>
                        <td>薪资</td>
                        <td>就业城市</td>
                        <td>操作</td>
                    </tr>
                </thead>

                <tbody>
                </tbody>
            </table>
        </div>
    </div>


<script>
    let nn = document.querySelector("#name")
    let age = document.querySelector("#age")
    let gender = document.querySelector("#gender")
    let salary = document.querySelector("#salary")
    let city = document.querySelector("#city")
    let btn = document.querySelector("button")

    let body = document.querySelector("tbody")

    btn.addEventListener("click", function() {
        if (!nn.value || !age.value || !gender.value || !salary.value || !city.value) {
            alert("请填写完整信息")
        } else {
            let ntr = document.createElement("tr")
            ntr.innerHTML = `
                        <td>${body.children.length + 1}</td>
                        <td>${nn.value}</td>
                        <td>${age.value}</td>
                        <td>${gender.value}</td>
                        <td>${salary.value}</td>
                        <td>${city.value}</td>
                        <td><span>删除</span></td>
            `
            body.appendChild(ntr)
        }
    })

    
    body.addEventListener("click", function(e) {
        body.removeChild(e.target.parentNode.parentNode)
    })
</script>
    
    
</body>
</html>